<template>
    <div style="width:94%;margin:auto">
        <div style="border-bottom: 1px solid;">
            <h2>待确认订单详情</h2>
        </div>
        <div style="margin-top:10px">
            <el-table border  :data="orders">

                <el-table-column  label="图片" min-width="20%">
                    <template slot-scope="scope">
						<div style="width: 80px;height: 80px;">
							<img v-bind:src="`${imgUrl}/api/public/showImg/${scope.row.newBook.picture}`"
								style="width: 80px; height: 80px;" />
						</div>
					</template>
                </el-table-column>

                <el-table-column  prop="newBook.name" label="商品名称" min-width="35%">
			    </el-table-column>

                <el-table-column  prop="newBook.price" label="商品价格" min-width="15%">
			    </el-table-column>

                <el-table-column  prop="cart.num" label="商品数量" min-width="15%">
			    </el-table-column>

                <el-table-column  label="商品总价" min-width="15%">
                    <template slot-scope="scope">
                        {{scope.row.cart.num*scope.row.newBook.price}}
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div style="margin-top:10px;border-top:5px solid gray">
                <el-tag style="margin-top:10px">总价钱:</el-tag> {{amount}}
            </div>
        <hr>
        <div style="margin-top:10px;">
            <el-input v-model="addr" style="margin-bottom:10px" placeholder="请输入内容" >
                <template slot="prepend">请输入收货地址</template>
            </el-input>
            <el-input v-model="phone" placeholder="请输入内容" >
                <template slot="prepend">请输入收货电话</template>
            </el-input>
        </div>
        <hr>
        <div>
            <el-button @click="restart()" type="primary">{{restartText}}</el-button>
            <el-button @click="anOrder()" type="success">{{anOrderText}}</el-button>
        </div>
    </div>
</template>
<script>
        export default {
            name:'',
            props:[],
            data() {
                return {
                    orders:[],
                    restartText:"重新选择",
                    anOrderText:"下单",
                    addr:'',
                    phone:'',
                    ordid:0,
                    ids:[]
                }
            },
            computed:{
                amount(){
                    var num = 0;
                    for (const key in this.orders) {
                        var obj = this.orders[key]
                        num += obj.newBook.price*obj.cart.num
                    }
                    return num
                }
            },
            methods:{
                //重新选择
                restart(){
                    if(this.restartText!="重新选择"){
                        return;
                    }
                    this.orders = [];
                    this.$router.push({path:"/fore/cart/cart"})
                },
                //下单
                anOrder(){
                    if(this.anOrderText=="去付款"){
                        this.$router.push({
                            path:"/fore/order/Payment",
                            query:{ordid:this.ordid,addr:this.addr,phone:this.phone,ids:this.ids}
                        })
                        //点击付款之后清空待确认订单
                        this.orders = [];
                        return;
                    }
                    if(this.orders.length<=0){
                        this.$message.error('没有待确认订单');
                        return ;
                    }
                    console.log(this.orders);
                    var list = [];
                    for (const idx in this.orders) {
                        var orderItem = {bookid:0,num:0,price:0.0};
                        for (const key in orderItem) {
                            orderItem[key] = this.orders[idx].cart[key]
                            if(key=="price"){
                                continue;
                            }
                        }
                        orderItem.price = this.orders[idx].newBook.price
                        list.push(orderItem)
                    }
                    var _this = this
                    this.$postJson("/api/fore/cart/addCart2Order",list)
                    .then(function(resp){
                        var order = resp.data.data
                        _this.ordid = order.ordid
                        _this.restartText = "下单成功,单号:"+order.ordid;
                        _this.anOrderText = "去付款";
                        _this.$message({
                            message: '下单成功,订单号:'+order.ordid,
                            type: 'success'
                        });
                    })
                }
            },
            mounted(){
                var orders  =  this.$store.state.orders
                for (const key in orders) {
                    this.ids.push(orders[key].cart.id)
                }
				if(this.orders.length>1){
					for(const i in this.orders){
						for(const j in this.ids){
							console.log(this.orders[i].cart.id==this.ids[j]);
						}	
					}
				}
				this.orders = orders
            }
        }
</script>
<style scoped="scoped">
.to{
    display: inline-block;
    border: 1px solid gray;
    background-color: aquamarine;
    padding:2px;
    margin-top: 5px
}
</style>
